<template>
  <div class="department">
    <!-- 搜索框 -->
    <PageSearch @query-click="handleQueryClick" @reset-Click="handleResetClick" />
    <!-- 列表数据 -->
    <PageContent ref="contentRef" :content-config="ContentConfig">
      <template #leader="scope">
        <span>{{ scope.row[scope.prop] }}</span>
      </template>
    </PageContent>
    <pageModal ref="modalRef" :modal-config="modalConfigRef" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import PageSearch from './c-cpns/page-search.vue'
// import PageContent from './c-cpns/page-content.vue'
import PageContent from '@/components/page-content/page-content.vue'
import ContentConfig from './config/content.config'
import { computed } from 'vue'
import useMainStore from '@/store/main/main'
import modalConfig from '@/views/main/system/department/config/modal.config'
import usePageContent from '@/hooks/usePageContent'

const modalConfigRef = computed(() => {
  const mainStore = useMainStore()
  const departments = mainStore.entireDepartments.map((item) => {
    return { label: item.name, value: item.value }
  })
  modalConfig.formItems.forEach((item: any) => {
    if (item.prop === 'parentId') {
      item.options.push(...mainStore.entireDepartments)
    }
  })
  return modalConfig
})
// import pageModal from './c-cpns/user-modal.vue'
const { contentRef, handleQueryClick, handleResetClick } = usePageContent()
// const contentRef = ref<InstanceType<typeof PageContent>>()
// function handleQueryClick(formdata: any) {
//   contentRef.value?.fetchPageListData(formdata)
// }
// // 重置
// function handleResetClick(formData = {}) {
//   contentRef.value?.fetchPageListData(formData)
// }
</script>

<style scoped></style>
